<style scoped>
.chart-wrapper{
    width: 100%;
    height: 300px;
}
</style>
<template>
  <!-- 合同类型 -->
  <div id="box-chartWrapper" class="chart-wrapper"></div>
</template>
<script>

import * as echarts from 'echarts'
export default {
    props: {
        markList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
        }
    },
    mounted() {
        this.graphBtn()
    },
    methods: {
        graphBtn() {
            let myChart = echarts.init(document.getElementById('box-chartWrapper'))
            let colorList = [
                '#CF4645', '#B580B2', '#29008A', '#146A90', '#8956FF',
                '#bfbfbf', '#595959', '#07beb8', '#17c3b2', '#48cae4',
                '#40a9ff', '#1890ff', '#ffd53e', '#ffda3d', '#adf7b6',
                '#ffd666', '#ffc53d', '#ffc53d', '#ffc069', '#ffa940',
                '#eccbd9', '#ffadad', '#ff6392', '#ffc09f', '#ffcb77',
                '#91e5f6', '#80ed99', '#9381ff', '#ffe066', '#83bcff',
                '#70C9A8', '#97d2fb', '#a0e8af', '#fa8c16' ]
            let colorListLen = colorList.length
            let fontSizeList = [
                12, 12.5, 13, 13.5, 14, 14.5,
                15, 15.5, 16, 16.5, 17, 17.5,
                18, 18.5, 19, 19.5, 20, 20.5,
                21, 22, 23, 24]
            let fontSizeListLen = fontSizeList.length
            let canDraggable = false
            let nodes = [
                { id: '0', name: '造口护理' },
                { id: '1', name: '置换尿管' },
                { id: '2', name: '置换胃管' },
                { id: '3', name: '上门通乳' },
                { id: '4', name: '静脉采血' },
                { id: '5', name: '伤口换药' },
                { id: '6', name: '皮下注射' },
                { id: '7', name: '居家健康管理' }
            ]
            let links = [
                { source: '0', target: '0' },
                { source: '1', target: '0' },
                { source: '2', target: '0' },
                { source: '3', target: '0' },
                { source: '4', target: '0' },
                { source: '5', target: '0' },
                { source: '6', target: '0' },
                { source: '7', target: '0' }
            ]
            nodes.forEach((n, index) => {
                if (index === 0) {
                    n.draggable = canDraggable
                    n.label = {
                        color: '#000',
                        fontSize: 30,
                        fontWeight: 'bold'
                    }
                } else {
                    n.draggable = canDraggable
                    n.label = {
                        color: colorList[Math.floor(Math.random() * colorListLen)],
                        fontSize: fontSizeList[Math.floor(Math.random() * fontSizeListLen)]
                    }
                }
            })
            let option = {
                title: {
                    show: true,
                    text: '',
                    x: 'center',
                    y: 'top',
                    color: '#666',
                    fontSize: 24
                },
                series: [
                    {
                        type: 'graph',
                        layout: 'force',
                        force: {
                            edgeLength: 30, // 边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                            repulsion: 300 // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                        },
                        roam: 'scale',
                        symbolSize: 0.1,
                        label: {
                            show: true,
                            color: 'auto',
                            fontSize: 14
                        },
                        lineStyle: {
                            width: 0
                        },
                        links: links,
                        data: nodes
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>